import React, {Component,useState,useRef,useContext,useEffect} from "react";

import {
    Input,
    Table,
    Modal,
    message,
    Button,
    Select,
    Breadcrumb,
    PageHeader
} from "antd";

const EditableContext = React.createContext();
const {confirm} = Modal;
const {Search} = Input;
const {Option} = Select;

import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined
} from "@ant-design/icons";

import axios from "@src/lib/axios";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";



export default class Brand extends Component {
    constructor(props) {
        super(props);
        this.state = {
            params: {
                title:"",
                type:1
            },

            list:[]
        };
        this.fetchData()
    }

    fetchData = () => {
        const {params} = this.state;
        axios.post("/platform/hotel/conf/brand/list", params).then(res => {
            if (res.code === 0) {
                let data = res.data;
                this.setState({
                    list:data
                });
            }
        });
    };
    handleAdd = () => {
        const { list } = this.state;
        const newData = {
            title:"",
            id:""
        };
        this.setState({
            list: [...list, newData],
        });
    };

    onChange = (value) =>{

        if (value.title_old != value.title) {
            if (value.id && value.title) {
                axios.post("/platform/hotel/conf/brand/update", {"type":1,"id": value.id, "name": value.title}).then(res => {
                    if (res.code === 0) {
                        message.success(res.msg);
                    } else {
                        message.error(res.msg);
                    }
                    this.fetchData();
                });
            }else{
                axios.post("/platform/hotel/conf/brand/add", {"name": value.title,"type":1}).then(res => {
                    if (res.code === 0) {
                        message.success(res.msg);
                    } else {
                        message.error(res.msg);
                    }
                    this.fetchData();
                });
            }
        }

    };

    render() {
        let {params, list} = this.state;
        const columns = [
            {title: "ID", dataIndex: "id", align: "center",},
            {title: "酒店品牌", dataIndex: "title", align: "center",
                render: (text, record) => (
                    <div>
                        <Input
                            onPressEnter={(text)=>this.onChange({title:text.target.value,id:record.id,title_old:record.title})}
                            defaultValue={text}/>
                    </div>
                )
            }
        ];

        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>配置管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">酒店配置</a>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>酒店品牌</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <PageHeader
                    className="site-page-header"
                    title="酒店品牌"
                    subTitle="配置酒店品牌,输入配置名称之后点击回车即可保存"
                />
                <Table
                    style={{"width":"600px"}}
                    size="small"
                    columns={columns}
                    rowKey="id"
                    dataSource={list}
                    pagination={false}
                />
                <Button
                    onClick={this.handleAdd}
                    type="primary"
                    style={{
                        marginBottom: 16,
                    }}
                >
                    添加品牌
                </Button>
            </div>
        )
    }

}
